<template>
	<div class="choose-list-iocns">
		<div class="icon-warp">
			<div @click="topHandle" :class="[disabled?'icon-disabled':'', isOperation?'icon-active':'']">
				<icon-font type="cap-icon-arrow-topping-serif"/>
			</div>
			<div @click="upHandle" :class="[disabled?'icon-disabled':'', isOperation?'icon-active':'']">
				<icon-font type="cap-icon-arrow-up-serif"/>
			</div>
			<div @click="downHandle" :class="[disabled?'icon-disabled':'', isOperation?'icon-active':'']">
				<icon-font type="cap-icon-arrow-down-serif"/>
			</div>
			<div @click="bottomHandle" :class="[disabled?'icon-disabled':'', isOperation?'icon-active':'']">
				<icon-font type="cap-icon-arrow-bottom-setting-serif"/>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['checked', 'list', 'disabled'],
	data() {
		return {};
	},
	computed: {
		isOperation() {
			let checkedLength = Object.keys(this.checked).length;
			if (checkedLength) {
				return true;
			} else {
				return false;
			}
		}
	},
	methods: {
		topHandle() {
			if (!this.hasCheck()) {
				return;
			}
			const { minIndex, maxIndex } = this.findMinAndMaxChecked();
			if (minIndex === 0) {
				return;
			}
			const removed = this.list.splice(minIndex, maxIndex - minIndex + 1);
			this.list.splice(0, 0, ...removed);
		},
		upHandle() {
			if (!this.hasCheck()) {
				return;
			}
			const { minIndex, maxIndex } = this.findMinAndMaxChecked();
			if (minIndex === 0) {
				return;
			}
			const removed = this.list.splice(minIndex, maxIndex - minIndex + 1);
			this.list.splice(minIndex - 1, 0, ...removed);
		},
		downHandle() {
			if (!this.hasCheck()) {
				return;
			}
			const { minIndex, maxIndex } = this.findMinAndMaxChecked();
			if (maxIndex === this.list.length - 1) {
				return;
			}
			const removed = this.list.splice(minIndex, maxIndex - minIndex + 1);
			this.list.splice(maxIndex - removed.length + 2, 0, ...removed);
		},
		bottomHandle() {
			if (!this.hasCheck()) {
				return;
			}
			const { minIndex, maxIndex } = this.findMinAndMaxChecked();
			if (maxIndex === this.list.length - 1) {
				return;
			}
			const removed = this.list.splice(minIndex, maxIndex - minIndex + 1);
			this.list.push(...removed);
		},
		hasCheck() {
			return Object.keys(this.checked).length !== 0;
		},
		findMinAndMaxChecked() {
			let minIndex = this.list.length,
				maxIndex = -1;
			this.list.forEach((it, i) => {
				if (!this.checked[it.$_entityUuid]) {
					return;
				}
				if (i < minIndex) {
					minIndex = i;
				}
				if (i > maxIndex) {
					maxIndex = i;
				}
			});
			return {
				minIndex,
				maxIndex
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.choose-list-iocns {
	float: left;
	height: 100%;
	width: 49px;
	position: relative;


	.icon-warp{
		width: 24px;
		height: 120px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-5px,-50%);

		& > div {
			width: 24px;
			height: 24px;
			background: $rightBtnDefalutBackgroundDefalut;
			border-radius: 3px;
			position: relative;
			cursor: pointer;
			box-sizing: border-box;
			display: table;
			& + div {
				margin-top: 8px;
			}
			& > i{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				color: $rightBtnIconDefaultColor;
				font-size: 12px;
			}
		}
		.icon-disabled {
			background: $rightBtnDefalutBackgroundDefalut;
			&:hover{
				color: $rightBtnIconDefaultColor;
				// cursor: not-allowed;
			}
		}
		.icon-active {
			background: $rightBtnActiveBackground;
			& > i{
					color: $rightBtnIconActiveColor;
			}
		}
	}
}
</style>
